<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection"/>
    <meta name="theme-color" content="#DB1011">
    <meta name="msapplication-navbutton-color" content="#FFFFFF">
    <link rel="stylesheet" href="home/default/css/index.css">
</head>
<body>
<div class="g-doc">
    <header>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @foreach($category as $key=>$obj)
                    <div class="swiper-slide @if($key == 0) active @endif">
                        {{$obj->category}}
                    </div>
                @endforeach


                <div class="pagination" style="display: none;"></div>
                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>

            </div>
        </div>


    </header>
    <div class="m-con">
        <div class="swiper-container2">
            <div class="swiper-wrapper">
                @foreach($category as $keyCate=>$objCate)
                <div class="swiper-slide" style="@if($keyCate != 0) display: none; @endif">
                    <div class="m-scroller">
                        @foreach($catelist[$objCate->category] as $key =>$obj)
                            <section class="m-list">
                                <a href="#">
                                    <div class="m-list-img">
                                        <img src="{{$obj->cover}}"/>
                                    </div>
                                    <div class="m-article">
                                        <div class="m-article-title">
                                            <span>{{$obj->title}}</span>
                                        </div>
                                        <div class="m-article-info">
                                            <div class="m-article-time">2015-09-01</div>
                                            <div class="m-article-counts"><span class="iconfont"></span>20万次</div>
                                        </div>
                                    </div>
                                </a>
                            </section>
                        @endforeach


                    </div>
                </div>
                @endforeach

            </div>
            <div class="swiper-scrollbar wrap-scroll">
                <div class="swiper-scrollbar-drag"></div>
            </div>


        </div>
    </div>
    <div class="m-sub-box">
        <div class="m-back-to-top">
           <i class="m-icon-go-top"></i>
         </div>
    </div>
</div>
</body>

<script src="home/default/js/zepto.min.js"></script>
<script src="home/default/js/idangerous.swiper.min-2.4.1.js"></script>
<script src="home/default/js/backToTop.js"></script>
<script src="home/default/js/resize.js"></script>
<script type="text/javascript" src="home/default/js/index.js"></script>
<script>
    $("header .swiper-slide").each(function () {
        $(this).click(function(){
         $(".swiper-slide-active").show();
        })
    })
</script>
</html>